<!doctype html>
<script src="../../resources/js-test.js"></script>
<div id="container">
<img name=outside1></img>
<form id="f1">
    <button id=n1></button>
    <output id=n1></output>
    <object name=n1></object>
    <select name=n1><option id=n1></option></select>
    <input name=n1 type=hidden>
    <input name=n1 type=image>
    <input name=n1 type=text>
    <input name=n2 type=image>
    <img name=n2></img>
    <img id=n2></img>
    <img id=n3></img>
</form>
<!-- The img element isn't 'reassociatable'; add @form to verify it is so. -->
<img name=n2 form=f1></img>
</div>
<script>
description("Test RadioNodeLists returned by the HTMLFormElement named-getter.");

var radioNodeList;

function shouldBeImgElement(n) {
    shouldBeTrue("radioNodeList[" + n + "] instanceof HTMLImageElement");
}

function verifyLength(n) {
    shouldBe("radioNodeList.length", n.toString());
    for (var i = 0; i < n; i++)
        shouldBeImgElement(i);
}

debug("Check that if no 'listed elements' match by name, img elements are picked instead.");

var form = document.getElementById("f1");
radioNodeList = form["n2"];
verifyLength(2);

var button = document.createElement("button");
button.name = "n2";
form.appendChild(button);
verifyLength(2);

var img = document.createElement("img");
img.name = "n2";
form.appendChild(img);
verifyLength(3);

document.querySelector("#container").remove();
</script>
